import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
import { message } from 'antd';
import AxOperationButton from '../AxOperationButton';
import { axconst } from '@/shared/axconst';
import { axhttp } from '@/shared/axhttp';
// import { useIntl } from "umi";
import AxColumnAction from '../AxColumnAction';
import { AxCard } from '@/components/AxBase';
import { AxPagination } from './components/AxPagination';
import { AxTable } from '@/components/AxList';
import { formatMessage } from 'umi-plugin-react/locale';
import { TableProps } from 'antd/lib/table';
import { axConfirm, axGroupArr } from './util';
import { AxStandardTablePros, AxStandardTableNoDvaPros, AxButtonType } from './data';
import AxPageHeaderWrapper from '@/components/AxBase/AxPageHeaderWrapper';
import { AxTableProps } from '../AxTable/data';
import DownloadInfo from '@/components/AxHeader/DownloadInfo';

/** 刷新时间（毫秒） */
const refreshTime = 5000;
const Table = (props: AxStandardTablePros & AxTableProps & TableProps<any>, ref: any) => {
  const {
    namespace,
    dispatch,
    loading,
    data,
    columns,
    buttons: buttonsFromProps = [],
    simpleSearchOption,
    needPage,
    showPagination = true,
    firstLoadData = true,
    params: paramsFromProps,
    RenderComponent,
    CreateComponent,
    UpdateComponent,
    SearchComponent,
    onDoubleClick,
    ...rest
  } = props;
  /** 列表固定的querystring参数 */
  const [params, setParams] = useState<any>(paramsFromProps || {});
  /** 配置排序 */
  const [sort, setSort] = useState<any>({});
  /** 配置分页 */
  const [page, setPage] = useState<any>(needPage === false ? {} : axconst.page.params);
  /** 表单值 */
  const [searchFormValues, setSearchFormValues] = useState<any>({});
  /** 增加弹框 */
  const [createVisible, setCreateVisible] = useState<boolean>(false);
  /** 修改弹框 */
  const [updateVisible, setUpdateVisible] = useState<boolean>(false);
  /** 查询弹框 */
  const [searchVisible, setSearchVisible] = useState<boolean>(false);
  /** 修改的对象values */
  const [operateValues, setOperateValues] = useState<any>({});
  /** 操作按钮 */
  const [buttons, setButtons] = useState<any>([]);
  /** 选中的行 */
  const [selectedRows, setSelectedRows] = useState<any>([]);
  /** 国际化 */
  // const intl = useIntl();
  /** AxTable的ref */
  const tableRef: any = useRef();

  /** 使用 ref 时自定义暴露给父组件的实例值 */
  useImperativeHandle(ref, () => ({
    operateValues,
    selectedRows,
    searchFormValues,
    handleRead,
    setParams,
  }));

  useEffect(() => {
    if (firstLoadData === true) handleRead();
  }, []);
  useEffect(() => {
    /** 处理操作按钮 */
    setButtons(
      buttonsFromProps.map(i => {
        let j;
        switch (i.axtype) {
          case 'refresh':
            j = {
              text: formatMessage({ id: 'app.table.refresh' }),
              icon: 'redo',
              type: 'primary',
              onClick: handleRefresh,
              ...i,
            };
            break;
          case 'create':
            j = {
              text: formatMessage({ id: 'app.table.create' }),
              icon: 'plus',
              type: 'primary',
              onClick: () => setCreateVisible(true),
              ...i,
            };
            break;
          case 'destroy':
            j = {
              text: formatMessage({ id: 'app.table.destroy' }),
              icon: 'delete',
              type: 'primary',
              axneedrows: true,
              onClick: () =>
                axConfirm(
                  formatMessage({ id: 'app.table.destroy' }),
                  handleDestroyMany,
                  selectedRows,
                ),
              ...i,
            };
            break;
          default:
            j = {
              type: 'primary',
              ...i,
            };
        }
        /** 需要选中行，按钮才有效 */
        if (j.axneedrows) j.disabled = true;
        return {
          ...j,
          axneedrows: j.axneedrows === true ? 'true' : 'false',
        };
      }),
    );
  }, [buttonsFromProps]);

  /** 刷新 */
  const handleRefresh = () => {
    handleRead({
      ...sort,
      ...page,
      ...searchFormValues,
    });
  };
  /** 查询 */
  const handleRead = (payload?: any) => {
    payload = payload ? {
      ...payload,
      ...sort,
      ...page,
    } : {
        ...sort,
        ...page,
      };

    return dispatch({
      type: `${namespace}/read`,
      params: params,
      payload: payload || {
        ...sort,
        ...page,
      },
    });
  };
  /** 查询首页 */
  const readFirstPage = () => {
    page.currentPage = 1;
    setPage(page);
    tableRef.current.cleanSelectedKeys();
    return handleRead({
      ...sort,
      ...page,
    });
  };
  /** 增加 */
  const handleCreate = (fields: any) => {
    return dispatch({
      type: `${namespace}/create`,
      params: params,
      payload: {
        ...fields,
      },
    }).then(() => {
      message.success(`${formatMessage({ id: 'app.table.create.success' })}`);
      setCreateVisible(false);
      readFirstPage();
    });
  };
  /** 修改 */
  const handleUpdate = (fields: any) => {
    return dispatch({
      type: `${namespace}/update`,
      params: params,
      payload: {
        ...fields,
      },
    }).then(() => {
      message.success(`${formatMessage({ id: 'app.table.update.success' })}`);
      setUpdateVisible(false);
      readFirstPage();
    });
  };
  /** 获取要修改的行信息，并展示修改弹框 */
  const handleUpdateValues = (flag: any, record: any) => {
    if (record) {
      setUpdateVisible(flag);
      setOperateValues(record);
    }
  };
  /** 删除多条 */
  const handleDestroyMany = (o: any, d: any) => {
    const ids = d.map((i: any) => i.id);
    return dispatch({
      type: `${namespace}/destroy`,
      params: params,
      payload: { ids },
    }).then(() => {
      message.success(`${formatMessage({ id: 'app.table.destroy.success' })}`);
      readFirstPage();
    });
  };
  /** 删除一条 */
  const handleDestroyOne = (id: any) => {
    return dispatch({
      type: `${namespace}/destroy`,
      params: params,
      payload: {
        id: [id],
      },
    }).then(() => {
      message.success(`${formatMessage({ id: 'app.table.destroy.success' })}}`);
      readFirstPage();
    });
  };
  /** 处理列操作按钮 */
  const axcolumns =
    columns &&
    columns.map((i: any) => {
      switch (i.axtype) {
        case 'operate':
          const { render, ...rest } = i;
          const btns = render.call();
          return {
            title: `${formatMessage({ id: 'app.table.operate' })}`,
            render: (value: any, record: any, index: number) => (
              <AxColumnAction
                buttons={btns.map((j: any) => {
                  switch (j.axtype) {
                    case 'update':
                      return {
                        text: `${formatMessage({ id: 'app.table.update' })}`,
                        onClick: () => handleUpdateValues(true, record),
                        ...j,
                      };
                    case 'destroy':
                      return {
                        text: `${formatMessage({ id: 'app.table.destroy' })}`,
                        popconfirm: true,
                        onClick: () => handleDestroyOne(record.id),
                        ...j,
                      };
                    default:
                      return j;
                  }
                })}
              />
            ),
            ...rest,
          };
        default:
          return i;
      }
    });
  /** 查询处理函数 */
  const handleSearch = (e: any, fieldsValue: any) => {
    /** 阻止默认事件 */
    if (e) e.preventDefault();
    page.currentPage = 1;
    setPage(page);
    setSearchFormValues(fieldsValue);
    tableRef.current.cleanSelectedKeys();
    return handleRead({
      ...sort,
      ...page,
      ...fieldsValue,
    });
  };

  /** 重置查询
   * @param flag (clear：清空查询条件，read：清空并查询)
   */
  const handleResetSearch = (flag = 'read') => {
    if (flag === 'read') {
      page.currentPage = 1;
      setPage(page);
      setSearchFormValues({});
      tableRef.current.cleanSelectedKeys();
      return handleRead({
        ...sort,
        ...page,
      });
    } else {
      setSearchFormValues({});
    }
  };
  /** Table分页、排序、筛选事件的响应函数 */
  const handleTableChange = (pagination: any, filtersArg: any, sorter: any) => {
    const sort: any = {};
    const page = axconst.page.getParams(pagination);
    const payload = {
      ...page,
      ...searchFormValues,
    };

    if (sorter && sorter.field) {
      const sortVal = `${sorter.field} ${sorter.order === 'ascend' ? 'asc' : 'desc'}`;
      sort.sort = sortVal;
    }
    setPage(page);
    setSort(sort);
    tableRef.current.cleanSelectedKeys();
    return handleRead({
      ...sort,
      ...payload,
    });
  };
  /** 选中行处理函数 */
  const handleSelectRows = (rows: any) => {
    const disabled = (rows && rows.length > 0 && true) || false;
    setSelectedRows(rows);
    setButtons((i: any) => {
      return i.map((j: any) => {
        if (j.axneedrows === 'true') j.disabled = !disabled;
        return j;
      });
    });
  };
  /** 操作按钮属性配置（包含简单查询） */
  const operationProps = {
    buttons: buttons,
    advanceSearch: SearchComponent ? true : false,
    searchFormValues: searchFormValues,
    searchOption: simpleSearchOption,
    handleVisible: setSearchVisible,
    handleSearch: handleSearch,
    handleResetSearch: handleResetSearch,
  };
  /** 高级查询属性配置 */
  const searchProps = {
    visible: searchVisible,
    values: searchFormValues,
    handleVisible: setSearchVisible,
    handleSearch: handleSearch,
    handleResetSearch: handleResetSearch,
  };
  /** 增加弹框属性 */
  const createProps = {
    visible: createVisible,
    handleVisible: setCreateVisible,
    handleCreate: handleCreate,
  };
  /** 修改弹框属性 */
  const updateProps = {
    values: operateValues,
    visible: updateVisible,
    handleVisible: setUpdateVisible,
    handleUpdate: handleUpdate,
  };
  return RenderComponent ? (
    <>
      {RenderComponent({
        operationProps,
        tableRef,
        loading,
        data,
        axcolumns,
        selectedRows,
        handleSelectRows,
        onDoubleClick,
        rest,
      })}
      {showPagination && (
        <AxPagination
          showPagination={showPagination}
          pagination={data.pagination}
          onChange={handleTableChange}
        />
      )}
      {CreateComponent && createVisible && <CreateComponent {...createProps} />}
      {UpdateComponent && updateVisible && <UpdateComponent {...updateProps} />}
      {SearchComponent && searchVisible && <SearchComponent {...searchProps} />}
    </>
  ) : (
      <AxPageHeaderWrapper>
        <AxCard>
          <AxOperationButton {...operationProps} />
          <AxTable
            ref={tableRef}
            loading={loading}
            data={data}
            columns={axcolumns}
            showPagination={false}
            selectedRows={selectedRows}
            onSelectRow={handleSelectRows}
            // onChange={handleTableChange}
            onDoubleClick={onDoubleClick}
            {...rest}
          />
          {showPagination && (
            <AxPagination
              showPagination={showPagination}
              pagination={data.pagination}
              onChange={handleTableChange}
            />
          )}
          {CreateComponent && createVisible && <CreateComponent {...createProps} />}
          {UpdateComponent && updateVisible && <UpdateComponent {...updateProps} />}
          {SearchComponent && searchVisible && <SearchComponent {...searchProps} />}
        </AxCard>
      </AxPageHeaderWrapper>
    );
};

const TableNoDva = (props: AxStandardTableNoDvaPros & AxTableProps & TableProps<any>, ref: any) => {
  const {
    url,
    columns,
    buttons: buttonsFromProps = [],
    simpleSearchOption,
    simpleSearchObject,
    needPage,
    showPagination = true,
    firstLoadData = false,
    onGetFirstData = true,
    params = {},
    RenderComponent,
    CreateComponent,
    UpdateComponent,
    SearchComponent,
    onDoubleClick,
    onSelectRow: onSelectRowFromProps,
    onBack = false,
    pageTitle = '',
    handleData,
    requestMethod = 'getListX',
    exportMethod = 'get',
    ...rest
  } = props;
  /** 配置排序 */
  const [sort, setSort] = useState<any>({});
  /** 配置分页 */
  const [page, setPage] = useState<any>(needPage === false ? {} : axconst.page.params);
  /** 表单值 */
  const [searchFormValues, setSearchFormValues] = useState<any>({});
  /** 增加弹框 */
  const [createVisible, setCreateVisible] = useState<boolean>(false);
  /** 修改弹框 */
  const [updateVisible, setUpdateVisible] = useState<boolean>(false);
  /** 查询弹框 */
  const [searchVisible, setSearchVisible] = useState<boolean>(false);
  /** 修改的对象values */
  const [operateValues, setOperateValues] = useState<any>({});
  /** 操作按钮 */
  const [buttons, setButtons] = useState<any>([]);
  /** 选中的行 */
  const [selectedRows, setSelectedRows] = useState<any>([]);
  /** 加载中 */
  const [loading, setLoading] = useState(false);
  /** 数据 */
  const [data, setData] = useState<any>({
    list: [],
    success: false,
  });
  /** 查询数据总条数 */
  const [dataTotal, setDataTotal] = useState(0);
  /** 导出弹框 */
  const [downloadVisible, setDownloadVisible] = useState(false);
  /** 国际化 */
  // const intl = useIntl();
  /** AxTable的ref */
  const tableRef: any = useRef();
  const { getX, getDataX, getListX, postFormX } = axhttp;

  /** 使用 ref 时自定义暴露给父组件的实例值 */
  useImperativeHandle(ref, () => ({
    selectedRows,
    searchFormValues,
    setSearchFormValues,
    handleRead,
    handleRefresh,
    params,
    tableRef,
    dataTotal,
  }));

  useEffect(() => {
    if (firstLoadData === true) handleRead();
  }, []);

  useEffect(() => {
    /** 处理操作按钮 */
    setButtons(() => {
      let btns: any[] = [
        // {
        //   text: formatMessage({ id: 'app.table.refreshing' }),
        //   icon: 'sync',
        //   type: 'danger',
        //   spin: true,
        //   hidden: true,
        // }
      ];

      btns.push(...buttonsFromProps.map(i => {
        let j;
        switch (i.axtype) {
          case 'refresh':
            j = {
              text: formatMessage({ id: 'app.table.refresh' }),
              icon: 'redo',
              type: 'primary',
              onClick: () => handleRefresh(),
              ...i,
            };
            break;
          case 'create':
            j = {
              text: formatMessage({ id: 'app.table.create' }),
              icon: 'plus',
              type: 'primary',
              onClick: () => setCreateVisible(true),
              ...i,
            };
            break;
          case 'destroy':
            j = {
              text: formatMessage({ id: 'app.table.destroy' }),
              icon: 'delete',
              type: 'primary',
              axneedrows: true,
              onClick: () =>
                axConfirm(
                  formatMessage({ id: 'app.table.destroy' }),
                  handleDestroyMany,
                  selectedRows,
                ),
              ...i,
            };
            break;
          case 'import':
            j = {
              text: formatMessage({ id: 'app.table.import' }),
              icon: 'import',
              io: true,
              ...i,
            };
            break;
          case 'export':
            j = {
              text: formatMessage({ id: 'app.table.export' }),
              icon: 'export',
              io: true,
              onClick: () => handleExport(),
              ...i,
            };
            break;
          default:
            j = {
              type: 'primary',
              ...i,
            };
        }
        /** 需要选中行，按钮才有效 */
        if (j.axneedrows) j.disabled = true;
        return {
          ...j,
          axneedrows: j.axneedrows === true ? 'true' : 'false',
        };
      }));

      return btns;
    });
  }, [buttonsFromProps]);

  // /** 刷新中... */
  // const handleRefreshing = () => {
  //   setButtons((i: any) => {
  //     return i.map((j: any) => {
  //       if (j.icon === 'sync') j.hidden = false;
  //       if (j.icon === 'redo') j.hidden = true;
  //       return j;
  //     });
  //   });
  //   setTimeout(() => {
  //     setButtons((i: any) => {
  //       return i.map((j: any) => {
  //         if (j.icon === 'sync') j.hidden = true;
  //         if (j.icon === 'redo') j.hidden = false;
  //         return j;
  //       });
  //     });
  //     handleRefresh();
  //   }, refreshTime);
  // };

  /** 刷新 */
  const handleRefresh = () => {
    handleRead({
      ...sort,
      ...page,
      ...searchFormValues,
    });
  };
  /** 查询 */
  const handleRead = (payload?: any) => {
    setLoading(true);
    setSelectedRows([]);
    let method: any = getListX;
    switch (requestMethod) {
      case 'getX':
        method = getX;
        break;
      case 'getDataX':
        method = getDataX;
        break;
      case 'getListX':
        method = getListX;
        break;
    }
    return method(
      url.read,
      params,
      payload || {
        ...sort,
        ...page,
      },
    ).then((res: any) => {
      if (res) {
        handleData ? setData(handleData(res)) : setData(res);
        setDataTotal(res && res.pagination && res.pagination.total || 0)
      }
      return Promise.resolve(res);
    }).finally(() => {
      setLoading(false);
    });
  };
  /** 查询首页 */
  const readFirstPage = () => {
    page.currentPage = 1;
    setPage(page);
    tableRef.current.cleanSelectedKeys();
    return handleRead({
      ...sort,
      ...page,
    });
  };
  /** 增加 */
  const handleCreate = (fields: any) => {
    return postFormX(url.create, params, { ...fields }).then(() => {
      message.success(`${formatMessage({ id: 'app.table.create.success' })}`);
      setCreateVisible(false);
      readFirstPage();
    });
  };
  /** 修改 */
  const handleUpdate = (fields: any) => {
    return postFormX(url.update, params, { ...fields }).then(() => {
      message.success(`${formatMessage({ id: 'app.table.update.success' })}`);
      setUpdateVisible(false);
      readFirstPage();
    });
  };
  /** 获取要修改的行信息，并展示修改弹框 */
  const handleUpdateValues = (flag: any, record: any) => {
    if (record) {
      setUpdateVisible(flag);
      setOperateValues(record);
    }
  };
  /** 删除多条 */
  const handleDestroyMany = (o: any, d: any) => {
    const ids = d.map((i: any) => i.id);
    return postFormX(url.destroy, params, { ids }).then(() => {
      message.success(`${formatMessage({ id: 'app.table.destroy.success' })}`);
      readFirstPage();
    });
  };
  /** 删除一条 */
  const handleDestroyOne = (id: any) => {
    return postFormX(url.destroy, params, { id: [id] }).then(() => {
      message.success(`${formatMessage({ id: 'app.table.destroy.success' })}}`);
      readFirstPage();
    });
  };
  /** 处理列操作按钮 */
  const axcolumns =
    columns &&
    columns.map((i: any) => {
      switch (i.axtype) {
        case 'operate':
          const { render, ...rest } = i;
          const btns = render.call();
          return {
            title: `${formatMessage({ id: 'app.table.operate' })}`,
            render: (value: any, record: any, index: number) => (
              <AxColumnAction
                buttons={btns.map((j: any) => {
                  switch (j.axtype) {
                    case 'update':
                      return {
                        text: j.text || `${formatMessage({ id: 'app.table.update' })}`,
                        onClick: () => handleUpdateValues(true, record),
                        ...j,
                      };
                    case 'destroy':
                      return {
                        text: `${formatMessage({ id: 'app.table.destroy' })}`,
                        popconfirm: true,
                        onClick: () => handleDestroyOne(record.id),
                        ...j,
                      };
                    default:
                      const c = {};
                      for (const i in j) {
                        const jObj = j[i];
                        const type = typeof jObj;
                        if (type === 'function') {
                          c[i] = (e: any) => jObj({ e, value, record, index });
                        } else if (type === 'object') {
                          switch (jObj.type) {
                            /** 比较 */
                            case 'compare':
                              switch (jObj.operate) {
                                case '===':
                                  c[i] = record[jObj.field] === jObj.value;
                                  break;
                                case '!==':
                                  c[i] = record[jObj.field] !== jObj.value;
                                  break;
                                case '>':
                                  c[i] = record[jObj.field] > jObj.value;
                                  break;
                                case '>=':
                                  c[i] = record[jObj.field] >= jObj.value;
                                  break;
                                case '<':
                                  c[i] = record[jObj.field] < jObj.value;
                                  break;
                                case '<=':
                                  c[i] = record[jObj.field] <= jObj.value;
                                  break;
                              }
                              break;
                            case 'function':
                              c[i] = jObj.operate({ value, record, index });
                              break;
                          }
                        } else {
                          c[i] = jObj;
                        }
                      }
                      return c;
                  }
                })}
              />
            ),
            ...rest,
          };
        default:
          return i;
      }
    });
  /** 查询处理函数 */
  const handleSearch = (e: any, fieldsValue: any) => {
    /** 阻止默认事件 */
    if (e) e.preventDefault();
    page.currentPage = 1;
    setPage(page);
    setSearchFormValues(fieldsValue);
    tableRef.current.cleanSelectedKeys();
    return handleRead({
      ...sort,
      ...page,
      ...fieldsValue,
    });
  };

  /** 重置查询
   * @param flag (clear：清空查询条件，read：清空并查询)
   */
  const handleResetSearch = (flag = 'read') => {
    if (flag === 'read') {
      page.currentPage = 1;
      setPage(page);
      setSearchFormValues({});
      tableRef.current.cleanSelectedKeys();
      return handleRead({
        ...sort,
        ...page,
      });
    } else {
      setSearchFormValues({});
      return Promise.resolve();
    }
  };
  /** Table分页、排序、筛选事件的响应函数 */
  const handleTableChange = (pagination: any, filtersArg: any, sorter: any) => {
    const sort: any = {};
    const page = axconst.page.getParams(pagination);
    const payload = {
      ...page,
      ...searchFormValues,
    };

    if (sorter && sorter.field) {
      const sortVal = `${sorter.field} ${sorter.order === 'ascend' ? 'asc' : 'desc'}`;
      sort.sort = sortVal;
    }
    setPage(page);
    setSort(sort);
    tableRef.current.cleanSelectedKeys();
    return handleRead({
      ...sort,
      ...payload,
    });
  };
  /** 选中行处理函数 */
  const handleSelectRows = (rows: any) => {
    const disabled = (rows && rows.length > 0 && true) || false;
    setSelectedRows(rows);
    setButtons((i: any) => {
      return i.map((j: any) => {
        if (j.axneedrows === 'true') j.disabled = !disabled;
        return j;
      });
    });

    onSelectRowFromProps && onSelectRowFromProps(rows);
  };
  /** 导出数据 */
  const handleExport = () => {
    return getX(url.export, searchFormValues, exportMethod).then(res => {
      if (res.data === true) {
        setDownloadVisible(true);
      } else message.success(`${formatMessage({ id: 'app.table.export.fail' })}`);
    });
  };
  /** 操作按钮属性配置（包含简单查询） */
  const operationProps = {
    buttons: buttons,
    advanceSearch: SearchComponent ? true : false,
    searchFormValues: searchFormValues,
    searchOption: simpleSearchObject && simpleSearchObject.map((m: any) => {
      const { Component, ...rest } = m;
      return <Component {...rest} axvalue={searchFormValues[m.field]} />;
    }) || simpleSearchOption,
    handleVisible: setSearchVisible,
    handleSearch: handleSearch,
    handleResetSearch: handleResetSearch,
  };
  /** 高级查询属性配置 */
  const searchProps = {
    visible: searchVisible,
    values: searchFormValues,
    handleVisible: setSearchVisible,
    handleSearch: handleSearch,
    handleResetSearch: handleResetSearch,
  };
  /** 增加弹框属性 */
  const createProps = {
    visible: createVisible,
    handleVisible: setCreateVisible,
    handleCreate: handleCreate,
    params
  };
  /** 修改弹框属性 */
  const updateProps = {
    values: operateValues,
    visible: updateVisible,
    handleVisible: setUpdateVisible,
    handleUpdate: handleUpdate,
  };
  /** 下载信息弹框属性 */
  const downloadProps = {
    visible: downloadVisible,
    handleVisible: setDownloadVisible,
  };
  return RenderComponent ? (
    <>
      {RenderComponent({
        operationProps,
        tableRef,
        loading,
        data,
        axcolumns,
        selectedRows,
        handleSelectRows,
        onDoubleClick,
        rest,
      })}
      {showPagination && (
        <AxPagination
          showPagination={showPagination}
          pagination={data.pagination}
          onChange={handleTableChange}
        />
      )}
      {CreateComponent && createVisible && <CreateComponent {...createProps} />}
      {UpdateComponent && updateVisible && <UpdateComponent {...updateProps} />}
      {SearchComponent && searchVisible && <SearchComponent {...searchProps} />}
      {downloadVisible && <DownloadInfo {...downloadProps} />}
    </>
  ) : (
      <AxPageHeaderWrapper onBack={onBack} title={pageTitle}>
        <AxCard>
          <AxOperationButton {...operationProps} />
          <AxTable
            ref={tableRef}
            loading={loading}
            data={data}
            columns={axcolumns}
            showPagination={false}
            selectedRows={selectedRows}
            onSelectRow={handleSelectRows}
            onGetFirstData={onGetFirstData && readFirstPage}
            // onChange={handleTableChange}
            onDoubleClick={onDoubleClick}
            {...rest}
          />
          {showPagination && (
            <AxPagination
              showPagination={showPagination}
              pagination={data.pagination}
              onChange={handleTableChange}
            />
          )}
          {CreateComponent && createVisible && <CreateComponent {...createProps} />}
          {UpdateComponent && updateVisible && <UpdateComponent {...updateProps} />}
          {SearchComponent && searchVisible && <SearchComponent {...searchProps} />}
          {downloadVisible && <DownloadInfo {...downloadProps} />}
        </AxCard>
      </AxPageHeaderWrapper>
    );
};

const AxStandardTable = forwardRef(Table);
const AxStandardTableNoDva = forwardRef(TableNoDva);

export { axConfirm, axGroupArr, AxButtonType, AxStandardTable, AxStandardTableNoDva };
